<script setup>
import { computed } from 'vue'
const props = defineProps({
	list: {
		type: Array,
		required: true
	},
	title: {
		type: String,
		required: true
	},
	bgColor: {
		type: String,
		required: true
	},
	color: {
		type: String,
		required: true
	}
})

// 建立type映射
const typeMap = {
	热门景点: 'scenery',
	热门酒店: 'hotel',
	热门餐厅: 'restaurant',
	热门攻略: 'post'
}

// 为详情页匹配类型type
const type = computed(() => {
	return typeMap[props.title] || 'unknow'
})

// 点击卡片跳转页面
const onClickCard = () => {
	uni.navigateTo({
		url: `/ComprehensivePackage/List/List?type=${type.value}&is_hot=1`
	})
}

// 点击Item项跳转详情页
const onClickItem = (id) => {
	uni.navigateTo({
		url: `/ComprehensivePackage/Detail/Detail?detail_id=${id}&type=${type.value}`
	})
}
</script>

<template>
	<view class="card" :style="{ backgroundColor: bgColor }" @tap="onClickCard">
		<view class="card-title">
			<view class="card-title-text" :style="{ color: color }">{{ title }}</view>
			<up-icon name="play-right-fill" :color="color"></up-icon>
		</view>

		<scroll-view scroll-x class="scroll" enable-flex>
			<view class="card-item" v-for="(item, index) in list" :key="index" @tap.stop="onClickItem(item.id)">
				<up-image :src="item.image" width="130" height="150" radius="10" mode="aspectFill"></up-image>
				<view class="name ellipsis" :style="{ color: color }">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
.card {
	margin: 20rpx 0;
	margin-top: 0;
	padding: 10rpx;
	border-radius: 15rpx;

	.card-title {
		display: flex;
		align-items: center;
		font-size: 40rpx;
		font-weight: bold;
		padding: 20rpx;

		.card-title-text {
			margin-right: 10rpx;
		}
	}

	.scroll {
		height: 400rpx;
		display: flex;

		.card-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			height: 400rpx;
			margin-right: 20rpx;

			.name {
				text-align: center;
				width: 230rpx;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
